/**
 * 特别注意：
 *      该文件为本人学习整理,实际插件配置相关版本号可能出现不对应的情况，仅为参考！！！
 *      仅提供参考，自己开发配置慎用！！！
 * 
*/


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//导入在页面中自动生成html页面的插件

//删除文件夹
const cleanWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template:path.resolve(__dirname,'./src/index.html') ,//源文件
    filename:"index.html",//生成的内存中的首页,同时会在生成的新的首页中引入main.js文件
    minify:{
        collapseWhitespace:true, //合并多余的空格
        removeComments:true,     //移除注释
        removeAttributeQuotes:true //移除属性上的双引号
    }
});

//抽离css的样式，为打包后的单独文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//压缩css代码
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


//向外部暴露一个打包的配置对象；因为webpack是基于node构建的，所以webpack支持所有Node API和语法
//webpack默认只能处理.js文件 像.png .vue 无法主动处理，所以需要第三方的loader； 
module.exports = {
    mode:"production",  //development 该模式下打包后不压缩   production 该模式下打包会被压缩
    //在webpack4.x有一个很大的特性，就是 约定大于配置 ，约定默认的打包文件入口路劲就是src -> index.js文件
    entry:{
        app:path.join(__dirname,'./src/main.js'),
        vendors:['antd'] //抽离的第三方包
    },
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'js/bundles.js'
    },
    plugins:[
        htmlPlugin,

        //每次打包都清除dist目录，重新生成，低版本可以使用，本项目无效
        // new cleanWebpackPlugin(['dist'])

        //webapck4.x 高版本已废弃的,本项目无效
        // new webpack.optimize.CommonsChunkPlugin({
        //     name:'vendors', //指定要抽离的入口名称
        //     filename:'js/vendors.js'
        // })

        //webapck4.x 高版本已废弃的,本项目无效
        // new webpack.optimize.UglifyJsPlugin({
        //     compress:{
        //         warnings:false //移除警告
        //     }
        // }),

         //webapck4.x 高版本已废弃的,本项目无效
        // new webpack.optimize.DedupePlugin({ //设置为产品上线环境，进一步压缩JS代码
            // "process.env.NODE_ENV":"production"
        // })

        //抽离css文件
        // new ExtractTextPlugin("css/style.css"), 

        //压缩css文件
        // new OptimizeCssAssetsPlugin() 
    ],
    module:{ //所有第三方 模块的配置规则
        rules:[ //第三方匹配规则
            

            /**
             * 在css-loader之后，通过？追加参数
             * 其中有个固定的参数，叫做modules，表示为普通的css样式表，启用模块化
             * */

            /**此前安装了3.2.0版本的css-loader配置localIdentName一直提示无效,做降级处理到（2.2.1）可做如下配置*/
            {   
                test:/\.css$/,                
                //方法一配置：打包处理css样式表的第三方loader
                // use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'],
                // use:['style-loader','css-loader'],
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:"css-loader",
                    publicPath:'../' //自动补全路径
                })

                //方法二配置：打包处理css样式表的第三方loader
                // use:[
                // {loader:'style-loader'},
                // {
                //     loader:'css-loader',
                //     options:{
                //         modules:true,
                //         localIdentName:'[path][name]-[local]'      
                //     }
                
                // }]
            },
            // 打包处理字体文件的loader
            {
                test:/\.ttf|woff|woff2|eot|svg$/,
                use:'url-loader'    
            },
            //打包处理scss文件的loader,抽离sass样,具体在github上寻找该ExtractTextPlugin 插件的详细配置
            {
                test:/\.scss$/,
                use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader']
            },
            //处理图片资源
            {
                test:/\.png|gif|bmp|jpg|jpeg$/,
                use:'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]'

            },
            {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}, //exclude添加排除项
                
                
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'], //表示这几个文件后缀名，可以省略不写
        alias:{
            '@':path.join(__dirname,'./src') //这样@就表示项目根目录中src这一层路径
        }
    }

}